<template>
  <div>
    <el-dialog custom-class="dialog"  :title="iconType == 0?'图标选择':'图片选择'" width="50%"  :append-to-body="true" :before-close="handleClose" v-el-drag-dialog :visible="isShow">
      <div style="height: 48vh;overflow: auto;position: relative;">
        <div style="display: flex;flex-direction: row;align-items: center;height: 50px;">
          <el-input prefix-icon="el-icon-search" placeholder="请输入名称" style="width: 200px;" v-model="keyword"></el-input>
          <el-button style="margin-left: 10px"  icon="el-icon-search" type="primary" @click="queryClick">查询</el-button>
          <el-button style="margin-left: 10px"  icon="el-icon-refresh-right" type="info" @click="resetClick">重置</el-button>
        </div>
        <el-tabs type="border-card"  v-model="iconType " style="height: calc(48vh - 50px)" @tab-click="tabClick">
          <el-tab-pane label="图标">
            <div class="grid"  style="height: calc(48vh - 130px)" v-infinite-scroll="loadmore"  infinite-scroll-disabled="loading">
              <div v-for="item in iconData" :key="item.id">
                <div class="icon-item" @click="choose(item)">
                  <img class="icon-item-img"  :src="item.iconUrl | thumbnail(180,180)"/>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图片">
            <div class="grid_img" style="height:calc(48vh - 130px)" v-infinite-scroll="loadmore"  infinite-scroll-disabled="loadingImg">
              <div v-for="item in imgData" :key="item.id">
                <div class="icon-item" @click="choose(item)">
                  <img class="icon-item-img" :src="item.iconUrl | thumbnail_pad(250,250)"/>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>

  .dialog{
    .el-dialog__header{
      border-bottom: 1px solid #eee;
    }
  }
  .dialog-button-slot{
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .currentClass{
    border:1px solid #409EFF;
    box-sizing: border-box;
  }
  .grid {
    width: 100%;
    overflow: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

    span {
      display: block;
      font-size: 13px;
      margin-top: 8px;
    }

    .icon-item {
      margin: 10px;
      height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 60px;
      float: left;
      color: #24292e;
      cursor: pointer;
      .icon-item-img{
        display: block;
        width: 30px;
        height: 30px;
      }
    }
  }
  .grid_img {
    width: 100%;
    overflow: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    span {
      display: block;
      font-size: 13px;
      margin-top: 8px;
    }

    .icon-item {
      margin: 10px;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100px;
      float: left;
      color: #24292e;
      cursor: pointer;
      .icon-item-img{
        display: block;
        width: 80px;
        height: 80px;
      }
    }
  }
</style>
<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../utils/utils.js'
  import { list } from '@/api/sysIcon'
  export default {
    directives: { elDragDialog },
    data() {
      return {
        pageNum: 1,
        pageSize: 100,
        iconType :0,
        loading:true,
        loadingImg:true,
        isShow: false,
        iconData: [],
        imgData: [],
        keyword:'',
        currentId:'',
        currentUrl:''
      }
    },
    created() {

    },
    methods: {
      show() {
        this.pageNum = 1;
        this.iconData=[];
        this.imgData=[];
        this.loadSysIcon()
        this.loadSysImg()
        this.isShow = true
      },
      handleClose(){
        this.isShow = false
      },
      tabClick(){
        this.pageNum = 0;
        if(this.iconType == 0){
          this.iconData = [];
        }else {
          this.imgData = [];
        }
        this.loadmore()
      },
      queryClick(){
        this.pageNum = 0;
        if(this.iconType == 0){
          this.iconData = [];
        }else {
          this.imgData = [];
        }
        this.loadmore()
      },
      resetClick(){
        this.keyword = '';
        this.pageNum = 1;
        this.iconData=[];
        this.imgData=[];
        this.loadSysIcon()
        this.loadSysImg()
      },
      loadmore(){
        console.log( this.loading)
        this.pageNum = this.pageNum+1;
        if(this.iconType == 0){
          this.loadSysIcon()
        }else {
          this.loadSysImg()
        }
      },
      choose(item){
        this.isShow = false;
        this.$emit('confirm',item)
      },
      loadSysIcon() {
        let _this = this;
        this.loading = true;
        const params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize',this.pageSize);
        params.append('iconType', 0 );
        params.append('name', this.keyword)
        list(params).then(response => {
          console.log(response)
          response.data.data.forEach(function (item) {
            _this.iconData.push(item)
          })
          this.loading = response.data.data.length < this.pageSize;
          console.log( this.loading)
        }).catch(error => {
          this.loading = false;
        })

      },
      loadSysImg() {
        let _this = this;
        this.loadingImg = true;
        const params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize',this.pageSize);
        params.append('iconType', 1 );
        params.append('name', this.keyword)
        list(params).then(response => {
          console.log(response)
          response.data.data.forEach(function (item) {
            _this.imgData.push(item)
          })
          this.loadingImg = response.data.data.length < this.pageSize;
        }).catch(error => {
          this.loadingImg = false;
        })
      },
    }
  }
</script>
